<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #box{
            width: 100px;
            height: 100px;
            background-color: red;

            position: absolute;
        }
    </style>
</head>
<body>
   <button id="btn">往右走</button>
   <div id="box"></div>
<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {

        // 0. 变量
        var target = 800, timer = null;
        var box = $("box");

        // 1. 监听按钮的点击
        $("btn").onclick = function () {
             // 1.1 清除定时器
             clearInterval(timer);

             // 1.2 设置定时器
            timer = setInterval(function () {
                // 1.3 求出步长
                var speed = (target - box.offsetLeft) * 0.2;

                console.log("之前" + speed);

                // 向上取整
                speed = Math.ceil(speed);

                console.log("之后" + speed);

                // 1.4 动起来
                box.style.left = box.offsetLeft + speed + "px";
                box.innerText = box.offsetLeft;

                // 1.5 判断
                if(box.offsetLeft === target){
                    clearInterval(timer);
                }
            }, 20);
        };
    }
</script>
</body>
</html>